<template>
    <div class="home-containter">
        <!--顶部导航栏-->
        <van-nav-bar 	>
  <template #right>
    <van-button icon="search" size="small" round class="search-button" @click="toSearch()">搜索</van-button>
  </template>
</van-nav-bar>
<!--频道点击区域-->
<van-tabs class="channel-tabs" v-model:active="active" @change="changeA">
  <van-tab :title="item.name" v-for="(item, index) in channels" :key="item.id">
 <articleList></articleList>
</van-tab>
<template #nav-right>
    <van-icon name="wap-nav" class="hamburger-btn" @click="show = true"></van-icon>
    </template>
</van-tabs>
<!--频道弹出层-->
<van-popup
  v-model:show="show"
  closeable
  position="bottom"
  close-icon-position="top-left"
  :style="{ height: '100%' }"
>
<channel-edit></channel-edit>
</van-popup>
    </div>
    </template>

<script setup>
import { onMounted } from "vue"
import { useUsersStore } from "../../store/home"
import { storeToRefs } from "pinia"
import router from "../../router/router"
//引入article-list组件
import articleList from "../../components/article-list.vue"
//引入channel-edit组件
import channelEdit from "../../components/channel-edit.vue"

let store = useUsersStore()
let { channels, active, show } = storeToRefs(store)
//屏幕切换
function changeA(val) {
    store.channelsId = val + 1

}
//点击搜索
function toSearch() {
    router.push("/search")
}
onMounted(() => {
    store.getUserChannels()
})
</script>

<style scoped>
.van-nav-bar {
    background-color: #3296fa;
}

.search-button {
    width: 680px;
    height: 50px;
    border: none;
    background-color: #5babfb;
    color: #fff;
    font-size: 18px;
}

.home-containter {
    padding-bottom: 100px;
}
</style>